<template>
    <div style="display: flex;">
        <el-card class="user-card">
            <div class="user-container">
                <el-avatar :size="100" >
                    <img
                        :src="userStor.state.userInfo.avatar"
                    />
                </el-avatar>
                <h1 class="user-info">{{ userStor.state.userInfo.username }}</h1>
                <el-divider/>
            </div>

            <div  class="statistic-card">
                <el-statistic :value="100">
                    <template #title>
                        <div style="display: inline-flex; align-items: center; ">
                        总文件数
                            <el-tooltip
                                effect="dark"
                                content="网盘的总文件数"
                                placement="top"
                            >
                                <el-icon style="margin-left: 4px" :size="12">
                                <Warning />
                                </el-icon>
                            </el-tooltip>
                        </div>
                    </template>
                </el-statistic>

                <el-statistic :value="20">
                    <template #title>
                        <div style="display: inline-flex; align-items: center">
                        上传文件数
                            <el-tooltip
                                effect="dark"
                                content="网盘的上传文件数"
                                placement="top"
                            >
                                <el-icon style="margin-left: 4px" :size="12">
                                <Warning />
                                </el-icon>
                            </el-tooltip>
                        </div>
                    </template>
                </el-statistic>

                <el-statistic :value="0">
                    <template #title>
                        <div style="display: inline-flex; align-items: center">
                        分享次数
                            <el-tooltip
                                effect="dark"
                                content="用户之间分享文件次数"
                                placement="top"
                            >
                                <el-icon style="margin-left: 4px" :size="12">
                                <Warning />
                                </el-icon>
                            </el-tooltip>
                        </div>
                    </template>
                </el-statistic>
            </div>
        </el-card>
        <!-- 表单修改个人信息 -->
        <el-card class="user-form">
            <div>
                <el-tabs class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="基本资料" >
                        <el-form :model="form" label-width="120px">
                            <el-form-item label="网盘ID">
                                <!-- <el-input v-model="userStor.state.userInfo.id" /> -->
                                {{ userStor.state.userInfo.id }}
                            </el-form-item>
                            <el-form-item label="用户名">
                                <el-input v-model="form.username" />
                            </el-form-item>
                            <el-form-item label="邮箱">
                                <el-input v-model="form.email" />
                            </el-form-item>
                            <el-form-item label="头像">
                                <el-upload
                                    class="avatar-uploader"
                                    action="/api/user/uploadAvatar"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    list-type="picture-card"
                                    :before-upload="beforeAvatarUpload"
                                >
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                                </el-upload>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">保存</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="修改密码" >
                        <el-form :model="form" label-width="120px">
                            <el-form-item label="旧密码">
                                <el-input v-model="form.oldPassword" />
                            </el-form-item>
                            <el-form-item label="新密码">
                                <el-input  v-model="form.newPassword"/>
                            </el-form-item>
                            <el-form-item label="确认密码">
                                <el-input v-model="form.confirmPassword" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmitTwo">保存</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
                
            </div>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { ref ,reactive} from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { userStore } from '@/stores/disk/user'
import {updateUserInfo} from '@/api/disk/user'
import { useRouter } from 'vue-router';//引入路由
const router=useRouter()
const imageUrl = ref('')
const userStor=userStore()
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('图片格式不正确，请上传 jpg 格式图片!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('图片大小不能超过 2MB!')
        return false
    }
    return true
}

// 表单修改个人信息
const form = reactive({
    username: userStor.state.userInfo.username,
    email: userStor.state.userInfo.email,
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
})

//提交
const onSubmit = async() => {
    await updateUserInfo(form) 
    userStor.getUser()
}
const onSubmitTwo = async() => {
    //TODO 实现修改密码功能
    await updateUserInfo(form) 
    userStor.getUser()
    //清楚token和userId
    localStorage.removeItem('token')
    localStorage.removeItem('userId')
    ElMessage.warning('请重新登录!')
    router.replace('/login')
}
//点击标签页
const handleClick= (tab:any, event:any) => {
    console.log(tab, event)
}
</script>



<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.user-card{
    height: 60%;
    width: 35%;
}
.user-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    .user-info{
        font-size: 24px;
        margin-top: 10px;
    }
}
.statistic-card{
    display: flex;  
    justify-content: space-between; 
    margin-top: 20px;
}
.user-form{
    margin-left: 20px;
    width: 65%;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
